<template>
	<!-- <view class="u-grid" :class="{'u-border-top u-border-left': border}" :style="[gridStyle]"><slot /></view> -->
	<u-grid :col="2" :border="false" class="videolistS-h">
		<u-grid-item  class="videolistS-h-item scroll-x-videoitem"
				v-for="(item,index) in  videolist" :key="index"
				:data-item="item"
				@click="videoTap(item)">
					<view class="Imagebox">
						
						<image class="Image" 
						:src="item.vod_pic"
						mode="aspectFill"
						></image>
					
						<view class="topvip" v-if="item.videotype===1">
							<text class="top-text">VIP</text>
						</view>
						
						<view class="bottom">
							<text class="bottom-text">{{item.vod_remarks}}</text>
						</view>
					</view>
					<view class="videotitle">
						
						<view class="title">
							<text class="title-text">{{item.vod_name}}</text>
						</view>
						
						<view class="desc">
							<view class="desc-item">
								<text class="desc-text jishu">{{item.vod_blurb}}</text>
							</view>
						</view>
					</view> 
				
		</u-grid-item>
		
	</u-grid> 
</template>

<script>
/**
 * grid 宫格布局
 * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。
 * @tutorial https://www.uviewui.com/components/grid.html
 * @property {String Number} col 宫格的列数（默认3）
 * @property {Boolean} border 是否显示宫格的边框（默认true）
 * @property {Boolean} hover-class 点击宫格的时候，是否显示按下的灰色背景（默认false）
 * @event {Function} click 点击宫格触发
 * @example <u-grid :col="3" @click="click"></u-grid>
 */
export default {
	name: 'u-grid-double',
	props: {
		videolist:{
			type:Array,
			default:[]
		}
		
	},
	data() {
		return {
			index: 0,
		}
	},
	methods:{
		videoTap(item) {
			console.log(21423423);
			console.log(item);
			console.log(21423423);
			this.$emit('videoTap', item);
		}
	}
};
</script>

<style scoped lang="scss">
@import "../../libs/css/style.components.scss";
	.videolistS-h{
		display: flex;
	}
	.videolistS-h-item{
		width: 340rpx;
	}
	.Imagebox{
		position: relative;
	}
	
	.Imagebox .Image,image{
		height: 204rpx;
		border-radius: 8rpx;
		width: 100%;
		width: 340rpx;
		
	}
	.topvip{
		position: absolute;
		top: 0rpx;
		right: 0rpx;
	}
	.top-text,.top-text>text {
		padding: 0 8rpx;
		height: 40rpx!important;
		line-height: 40rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: #2979ff;
		font-size: 28rpx!important;
		border-top-left-radius: 0;
		border-top-right-radius: 14rpx;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 14rpx;
	}
	.videotitle .desc{
		flex-wrap: nowrap!important;
		flex-direction: row!important;
		justify-content: space-between;
	}
	.videotitle,.title-text,.title,.desc{
		width: 332rpx!important;
		max-width: 332rpx!important;
	}
	
	.videotitle .desc .desc-item {
		width: 332rpx!important;
	}
	.bottom{
		position: absolute;
		bottom: 10rpx;
		right:12rpx;
		
	}
	.bottom-text,.bottom-text>text {
		padding-bottom: 10rpx;
		padding-right: 10rpx;
		font-size: 26rpx;
		color: #FFFFFF;
	}
	text,.title-text,.desc-text,.title,.desc {
		overflow: hidden;
		word-break: break-all;
		display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1; /** 显示的行数 **/
		lines:1;//NVUE下要用这个属性，来让文字超出隐藏变省略号
	}
	.title-text {font-size: 32rpx;}
    .desc {font-size: 24rpx;color: #747d8c;}
</style>
